<template>
    <div class="home zw-img-bg">
        <div class="home-panel">
            <div
                class="modules"
                :class="[item.disabled ? 'disabled' : 'abled']"
                v-for="item in navAuth.tenantModuleList"
                :key="item.code"
                @click="jumpHandler(item.code)">
                <img :src="`${item.icon}`" alt="" srcset="" />
                <span class="label">{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import store from '@/store';
import request from '@/request';
import { useRouter } from 'vue-router';
import { reactive, onMounted } from 'vue';
import { toPageHandler } from '@/router/forward';
import { ElMessage } from 'element-plus';

const router = useRouter(store);
const navAuth = reactive({ tenantModuleList: [] });

/**
 * 查询数据
 */
const queryHomeModules = async () => {
    const res = await request('queryNavServ');
    Object.assign(navAuth, res.data);
};

const jumpHandler = code => {
    if (navAuth.menuList.length === 0) {
        ElMessage.error('您无此权限，请联系管理员');
        return;
    }
    toPageHandler(navAuth, code, targetPath => {
        router.push(targetPath);
    });
};

onMounted(() => {
    queryHomeModules();
});
</script>
<style lang="scss" scoped>
.home {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    $length: 200px;
    background-image: url('/imgs/home_bg.png');
    .home-panel {
        width: calc($length * 3);
        display: flex;
        flex-wrap: wrap;
        // justify-content: center;
        .modules {
            width: $length;
            height: $length;
            // box-sizing: border-box;
            // border-bottom: 1px solid #eaeaea;
            // border-right: 1px solid #eaeaea;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            &:hover {
                cursor: pointer;
            }
            &:last-of-type {
                border-right: none;
            }
            &:nth-of-type(n + 4) {
                border-bottom: none;
            }
            &:nth-of-type(3n) {
                border-right: none;
            }
            img {
                width: calc($length * 0.4);
            }
            .label {
                padding-top: 12px;
                line-height: 1;
                color: #666;
                letter-spacing: 2px;
                font-size: 16px;
            }
        }
        .abled {
            // background-color: #fff;
            &:active {
                background-color: #f4f4f4;
            }
        }
        .disabled {
            background-color: #f8f8f8;
        }
    }
}
</style>
